import React, { Component } from 'react';
import './App.css';
import 'antd/dist/antd.css'
import { Layout, Input, Tabs, notification } from 'antd';
import TodoItem from "./components/TodoItem";

const { TabPane } = Tabs;
const { Header, Content, Footer } = Layout;
const { Search } = Input;

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      sourceData: JSON.parse(localStorage.getItem("todos")) || [],
      showData: [],
      key: "1"
    }
  }

  componentWillMount() {
    this.todoFilter(this.state.key)
  }


  todo(title) {
    return {
      title: title,
      status: "pending"
    }
  }


  todoFilter(key) {
    if (key == "1") {
      var temp = [];
      this.state.sourceData.forEach(element => {
        if (element.status !== "remove") {
          temp.push(element);
        }
      })
      this.setState({
        showData: temp
      })
    } else if (key == "2") {
      var temp = [];
      this.state.sourceData.forEach(element => {
        if (element.status === "OK") {
          temp.push(element);
        }
      });
      this.setState({
        showData: temp
      })
    } else if (key == "3") {
      var temp = [];
      this.state.sourceData.forEach(element => {
        if (element.status === "pending") {
          temp.push(element);
        }
      });
      this.setState({
        showData: temp
      })
    } else if (key == "4") {
      var temp = [];
      this.state.sourceData.forEach(element => {
        if (element.status === "remove") {
          temp.push(element);
        }
      });
      this.setState({
        showData: temp
      })
    }
  }


  changeTodostatus = (todo) => {
    var tempTodo = this.state.sourceData.find(element => {
      return element.title === todo.title;
    })

    if (tempTodo) {
      if (todo.checked) {
        tempTodo.status = "OK"
      } else {
        tempTodo.status = "pending"
      }
    }

    this.setState({
      sourceData: this.state.sourceData
    })

    this.todoFilter(this.state.key)
    localStorage.setItem("todos", JSON.stringify(this.state.sourceData))

  }

  deleteTodo = (todo) => {
    var tempTodo = this.state.sourceData.find(element => {
      return element.title === todo.title
    });

    if (tempTodo) {
      tempTodo.status = "remove";
    }

    this.setState({
      sourceData: this.state.sourceData
    })

    this.todoFilter(this.state.key)
    localStorage.setItem("todos", JSON.stringify(this.state.sourceData))
  }

  render() {
    return (
      <div className="App">
        <Layout className="layout">
          <Header>
            
            <div className="header_container">
            <h1>TODOList</h1>
                <Search
                  placeholder="请输入内容"
                  enterButton="添加TODO"
                  size="large"
                  onSearch={value => {
                    if (value.length === 0) {
                      notification["error"]({
                        message: '提示',
                        description:
                          '输入内容不能为空',
                      });
                      return;
                    }
                    var flag = false;
                    this.state.sourceData.forEach(element => {
                      if (element.title === value) {
                        flag = true;
                      }
                    });

                    if (!flag) {
                      var todo = this.todo(value);
                      var temp = this.state.sourceData;
                      temp.push(todo);
                      this.setState({
                        sourceData: temp
                      })
                      localStorage.setItem("todos", JSON.stringify(temp));

                    } else {
                      notification["error"]({
                        message: '提示',
                        description:
                          '内容不能重复',
                      });
                    }

                    this.todoFilter(this.state.key)
                  }}
                  style={{ width: 300 }} />
            </div>
          </Header>
          <Content style={{ padding: '0 50px' }}>
            <div className="site-layout-content">
              <div>
                <Tabs defaultActiveKey={this.state.key} onChange={(key) => {
                  this.setState({
                    key: key
                  })
                  this.todoFilter(key)
                }}>
                  <TabPane tab="全部" key="1">
                  </TabPane>
                  <TabPane tab="已完成" key="2">
                  </TabPane>
                  <TabPane tab="未完成" key="3">
                  </TabPane>
                  <TabPane tab="回收站 " key="4">
                  </TabPane>
                </Tabs>
                <div className="todo_content">
                  {
                    this.state.showData.map(element => {
                      return <TodoItem todo={element} changeTodostatus={this.changeTodostatus}
                        deleteTodo={this.deleteTodo}
                        key={element.title} />
                    })
                  }
                </div>
              </div>
            </div>
          </Content>
        </Layout>

      </div>
    );
  }


}

export default App;